<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
  <title>Document</title>
  <style media="screen">
    *{
      margin: 0;
      padding: 0;
    }
    #elementNav{
      width: 300px;
      overflow: hidden;
      transition: .5s;
    }
    li{
      list-style: none;
      line-height: 50px;
      /* text-indent: 24px; */
      width: 300px;
    }
    li.title{
      background-color: #232830;
      color: #63808B;
      transition: .5s;
    }
    li.title .leftIcon{
      height: 100%;
      width: 50px;
      text-align: center;
      line-height: 50px;
      display: inline-block;
    }
    ul.innerUl{
      height: 0px;
      overflow: hidden;
      transition: .5s;
    }
    ul.innerUl li{
      background-color: #233847;
      color: #63808B;
    }
  </style>
</head>
<body>
  <ul id="elementNav">
    <li class="title">
      <div class="leftIcon">
        <i class="fa fa-address-book" aria-hidden="true"></i>
      </div>
      <span>I am a teacher</span>
      <i class="fa fa-angle-right" aria-hidden="true"></i>
    </li>
    <li class="bigLi">
      <ul class="innerUl">
        <li class="title">I am a teacher1</li>
        <li class="bigLi">
          <ul class="innerUl">
            <li>I am a teacher3</li>
            <li>I am a teacher3</li>
            <li>I am a teacher3</li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="title">
      <div class="leftIcon">
        <i class="fa fa-address-book" aria-hidden="true"></i>
      </div>
      <span>I am a teacher</span>
      <i class="fa fa-angle-right" aria-hidden="true"></i>
    </li>
    <li class="bigLi">
      <ul class="innerUl">
        <li>I am a teacher other</li>
        <li class="title">I am a teacher1 <i class="fa fa-angle-right" aria-hidden="true"></i></li>
        <li class="bigLi">
          <ul class="innerUl">
            <li>I am a teacher3</li>
            <li>I am a teacher3</li>
            <li>I am a teacher3</li>
          </ul>
        </li>
        <li>I am a teacher other</li>
      </ul>
    </li>
  </ul>
  <button type="button" name="button" onclick="closea()">收起</button>
  <button type="button" name="button" onclick="opena()">打开</button>
  <script type="text/javascript">
  window.onload = function(){
    allLiTitle = document.getElementsByClassName('title');
    for (var i = 0; i < allLiTitle.length; i++) {
      allLiTitle[i].onclick = function(){
        // var nextLi = this.nextElementSibling.getElementsByClassName('innerUl')[0];
        var nextLi = this.nextElementSibling.children[0];

        //计算当前的点击元素下面li元素个数
        var flag = 1;
        var allInnerLi = nextLi.children;
        var cnt = 0;
        for (var i = 0; i < allInnerLi.length; i++) {
          if (!/^bigLi$/.test(allInnerLi[i].className)) {
            cnt++
          }
        }
        var everyLiHeight = 50;
        if (nextLi.style.height) {
          nextLi.style.height = '';
          flag = 0
        }else{
          var allLiHeight = everyLiHeight * cnt + 'px';
          nextLi.style.cssText = 'height:' + allLiHeight + ';';
        }
        var allParentNode = addParentHeight(this)
        if (flag && allParentNode) {
          var allParentNodeHeight = Number(allParentNode.style.height.replace('px', ''));
          var currentAllHeight = cnt * everyLiHeight + allParentNodeHeight;
          allParentNode.style.height = currentAllHeight + 'px';
        }else if(allParentNode){
          var allParentNodeHeight = Number(allParentNode.style.height.replace('px', ''));
          var currentAllHeight = allParentNodeHeight - cnt * everyLiHeight;
          allParentNode.style.height = currentAllHeight + 'px';
        }
        // if (allParentNode) {
        //   var allParentNodeHeight = Number(allParentNode.style.height.replace('px', ''));
        //   var currentAllHeight = cnt * everyLiHeight + allParentNodeHeight;
        //   allParentNode.style.height = currentAllHeight + 'px';
        // }

        //获取所有的ul元素，并关闭不是当前的ul元素
        var allUlList = document.getElementsByClassName('innerUl');
        var allUlList = this.parentNode.children;
        for (var i = 0; i < allUlList.length; i++) {
          if (allUlList[i].className === '' && allUlList[i] !== nextLi.parentNode) {
            allUlList[i].style.height = '';
          }
        }
      }
    }
  }

  //一直向上寻找增加父元素的高度
  function addParentHeight(element) {
    var currentElement = element.parentNode;
    var classList = [];
    while(currentElement.className !== ''){
      classList.push(currentElement)
      currentElement = currentElement.parentNode
    }
    if (classList.length >= 2) {
      return classList[classList.length - 2];
    }else{
      return false;
    }
  }

  function closea(){
    var allUl = document.getElementById("elementNav");
    allUl.style.cssText = 'width: 50px;'
  }
  function opena(){
    var allUl = document.getElementById("elementNav");
    allUl.style.cssText = 'width: 300px;'
  }

  </script>
</body>
</html>
